<template>
  <page-view class="flex-column">
    <title-bar :show-back="true" @back="$router.back()">登录</title-bar>
    <div class="content-box flex-1">
      <div class="login-box">
        <div class="login-item flex-row">
          <div class="left flex-row j-c a-c">
            <span class="iconfont iconyonghuming"></span>
          </div>
          <div class="right">
            <input type="text" v-model="loginForm.zh" placeholder="请输入用户名" class="txt">
            <div class="error-text" v-if="errors['loginForm.zh']">{{errors["loginForm.zh"]}}</div>
          </div>
        </div>
        <div class="login-item flex-row">
          <div class="left flex-row j-c a-c">
            <span class="iconfont iconmima"></span>
          </div>
          <div class="right">
            <input type="password" v-model="loginForm.password" placeholder="请输入密码" class="txt">
            <div class="error-text" v-if="errors['loginForm.password']">{{errors["loginForm.password"]}}</div>
          </div>
        </div>
        <div class="login-item flex-row a-c j-s-b">
          <label class="flex-row a-c">
            <input type="checkbox" style="margin-right:0.05rem">记住密码
          </label>
          <a href="#" class="register-link" :to="{name:'register'}">我要注册</a>
        </div>
        <button type="button" class="btn-login bg-primary" @click="checkLogin">登录</button>
      </div>
    </div>
  </page-view>
</template>
<script>
import Api from "@/utils/Api";
import {mapActions} from "vuex";

export default {
  name: "login",
  data(){
    return {
      loginForm:{
        zh:"",
        password:""
      }
    }
  },
  vuerify:{
    "loginForm.zh": {
      test:/.+/,
      message:"账号不能为空"
    },
    "loginForm.password": {
      test:/.+/,
      message: "密码不能为空"
    }
  },
  computed:{
    errors(){
      return this.$vuerify.$errors;
    }
  },
  methods:{
    ...mapActions(["setUserInfo","set_softeem_ele_client_token"]),
    async checkLogin(){
      if (this.$vuerify.check()){
        this.showLoading("正在登录中。。。");
        let result = await Api.userInfo.checkLogin(this.loginForm);
        this.setUserInfo(result.loginUserInfo);
        this.set_softeem_ele_client_token(result.token);
        this.$msg.success("登陆成功");
        this.$router.back();
      }else {
        // 验证不通过
        console.log("验证不通过");
      }
    }
  }
};
</script>
<style scoped lang="scss">
.login-box {
  border: 1px solid #ececec;
  width: 3rem;
  margin: 0.5rem auto;
  padding: 0.1rem;
  .login-item {
    padding: 0.1rem;
    border-bottom: 1px solid #ececec;
    .left {
      width: 0.5rem;
      .iconfont {
        font-size: 0.22rem;
      }
    }
    .right {
      .txt {
        border: none;
        outline: none;
        height: 0.4rem;
        font-size: 0.16rem;
      }
    }
    label {
      font-size: 0.14rem;
    }
    .register-link {
      font-size: 0.14rem;
      color: blue;
    }
  }
  .btn-login {
    border: none;
    height: 0.4rem;
    width: 100%;
    color: white;
    font-size: 0.18rem;
  }
}
.error-text {
  color: red;
}
</style>
